<div class="ui reconnect dimmer">
    <div class="content">
        <div class="ui text loader" ng-if="!reconnect_failed">Reconnecting...</div>
        <div class="ui inverted icon header" ng-if="reconnect_failed">
            <i class="icon times circle"></i>
            Connection Lost
            <div class="sub header">Please try to refresh later</div>
        </div>
    </div>
</div>
<div class="app-footer">
    <div class="ui horizontal list">
        <div class="item">Created by <a href="https://github.com/tjumyk/smonitor" target="_blank">Yukai (Kelvin) Miao</a></div>
        <div class="item" ng-show="socket">Server Ping: <span ng-hide="ping!=undefined">Unknown</span><span ng-show="ping!=undefined">{{ping}}ms</span> <button class="ui mini button" ng-click="server_restart()" ng-class="{'loading': server_restarting}">Restart Server</button></div>
        <div class="item" ng-show="config.package">Server Version: {{config.package.label}} <button class="ui mini button" ng-click="server_update()" ng-class="{'loading': server_updating}">Check Update</button></div>
        <div class="item" ng-show="clients">Clients: {{clients_total}} <button class="ui mini button" ng-click="show_client_list=!show_client_list"><span ng-show="show_client_list">Hide</span><span ng-hide="show_client_list">Show</span></button></div>
    </div>
</div>
<div class="table-responsive clients-table" ng-show="show_client_list">
    <table class="ui celled unstackable very compact single line table">
        <thead><tr><th>#</th><th>ID</th><th>User</th><th>Address</th><th>Browser</th><th>Engine</th><th>OS</th><th>Device</th></tr></thead>
        <tbody>
        <tr ng-repeat="(id, c) in clients" ng-class="{'active': socket.id==id}">
            <td>{{$index+1}}</td>
            <td ng-attr-title="{{id}}">{{c.short_id}}</td>
            <td>
                <div ng-if="c.user">
                    <img ng-if="c.user.avatar" class="ui avatar image" ng-src="{{c.user.avatar}}?size=64">
                    <i ng-if="!c.user.avatar" class="icon user circle"></i>
                    {{c.user.name}}
                </div>
            </td>
            <td ng-attr-title="{{c.address}}" ng-bind="c.hostname || c.address"></td>
            <td>{{c.browser.name}} <span class="ui mini label" ng-show="c.browser.version">{{c.browser.version}}</span></td>
            <td>{{c.engine.name}} <span class="ui mini label" ng-show="c.engine.version">{{c.engine.version}}</span></td>
            <td>{{c.os.name}} <span class="ui mini label" ng-show="c.os.version">{{c.os.version}}</span></td>
            <td>{{c.device.model}} <span class="ui mini label" ng-show="c.device.type">{{c.device.type}}</span> <span class="ui mini label" ng-show="c.device.vendor">{{c.device.vendor}}</span></td>
        </tr>
        </tbody>
    </table>
</div>
